<template>
    <div
        class="gift-select-box"
        v-if="giftShow"
        @click.self.prevent="closeGiftSelect"
    >
        <div class="gift-select-main">
            <div class="gift-select-title">选择赠品</div>
            <div class="gift-select-list">
                <div class="gift-item">
                    <common-checkbox @select="select"></common-checkbox>
                    <div class="gift-img-box">
                        <img src="http://blyb.oss-cn-hangzhou.aliyuncs.com/uploads/2019-06-26/1_0.jpg" />
                    </div>
                    <div class="gift-info-box">
                        <div class="gift-name">蕾珂美 懒人霜蕾珂美 懒人霜蕾珂美 懒人霜</div>
                        <div class="gift-num">x1</div>
                    </div>
                </div>
                <div class="gift-item">
                    <common-checkbox @select="select"></common-checkbox>
                    <div class="gift-img-box">
                        <img src="http://blyb.oss-cn-hangzhou.aliyuncs.com/uploads/2019-06-26/1_0.jpg" />
                    </div>
                    <div class="gift-info-box">
                        <div class="gift-name">蕾珂美 懒人霜蕾珂美 懒人霜蕾珂美 懒人霜</div>
                        <div class="gift-num">x1</div>
                    </div>
                </div>
                <div class="gift-item">
                    <common-checkbox @select="select"></common-checkbox>
                    <div class="gift-img-box">
                        <img src="http://blyb.oss-cn-hangzhou.aliyuncs.com/uploads/2019-06-26/1_0.jpg" />
                    </div>
                    <div class="gift-info-box">
                        <div class="gift-name">蕾珂美 懒人霜蕾珂美 懒人霜蕾珂美 懒人霜</div>
                        <div class="gift-num">x1</div>
                    </div>
                </div>
            </div>
            <div class="gift-select-sure">确定</div>
        </div>
    </div>
</template>

<script>
import CommonCheckbox from '@/components/Checkbox'
export default {
    name: 'GiftSelect',
    components: {
        CommonCheckbox
    },
    props: ['giftShow'],
    methods: {
        closeGiftSelect() {
            this.$emit('closeGiftSelect')
        },
        select(data) {
            console.log(data)
        }
    }
}
</script>

<style lang="stylus" scoped>
.gift-select-box
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 5
    .gift-select-main
        position absolute
        bottom 0
        left 0
        right 0
        background #fff
        border-radius 10px 10px 0 0
        .gift-select-title
            line-height 1.33rem
            text-align center
            font-size 0.42rem
            color #323232
        .gift-select-list
            padding 0 0.42rem
            .gift-item
                display flex
                align-items center
                margin-bottom 0.4rem
                .gift-img-box
                    margin-left 0.42rem
                    width 2.24rem
                    height 2.24rem
                    overflow hidden
                    img
                        width 100%
                        height 100%
                .gift-info-box
                    flex 1
                    .gift-name
                        font-size 0.37rem
                        color #323232
                        line-height 1.3
                    .gift-num
                        margin-top 0.42rem
                        font-size 0.37rem
                        color #323232
        .gift-select-sure
            line-height 1.33rem
            text-align center
            background #d7463c
            font-size 0.43rem
            color #fff
</style>


